import React from 'react';
import {
  Card,
  CardContent,
  CardActions,
  Typography,
  Box,
  Chip,
  Button,
  LinearProgress,
  CircularProgress,
  Avatar
} from '@mui/material';
import { alpha } from '@mui/material/styles';
import { EmojiEvents as TrophyIcon } from '@mui/icons-material';

function ChallengeCard({ challenge, onView, onParticipate, isParticipating, progress, loading, error }) {
  return (
    <Card sx={{
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      transition: 'all 0.3s ease',
      '&:hover': {
        transform: 'translateY(-8px)',
        boxShadow: (theme) => theme.shadows[8],
      },
      borderRadius: 2,
      overflow: 'hidden',
      position: 'relative',
      '&::before': {
        content: '""',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: '4px',
        background: (theme) => 
          challenge.difficulty === '简单' ? theme.palette.success.main :
          challenge.difficulty === '中等' ? theme.palette.warning.main :
          theme.palette.error.main
      }
    }}>
      <CardContent sx={{ flexGrow: 1, p: 3 }}>
        <Box sx={{ 
          display: 'flex', 
          alignItems: 'center', 
          mb: 2,
          gap: 2 
        }}>
          <Avatar 
            sx={{ 
              width: 56, 
              height: 56,
              bgcolor: 'primary.light',
              fontSize: '2rem'
            }}
          >
            {challenge.icon}
          </Avatar>
          <Box>
            <Typography variant="h6" gutterBottom>
              {challenge.title}
            </Typography>
            <Chip
              label={challenge.difficulty}
              size="small"
              color={
                challenge.difficulty === '简单' ? 'success' :
                challenge.difficulty === '中等' ? 'warning' :
                'error'
              }
            />
          </Box>
        </Box>

        <Typography 
          variant="body2" 
          color="text.secondary" 
          paragraph
          sx={{
            minHeight: 60,
            display: '-webkit-box',
            WebkitLineClamp: 3,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden'
          }}
        >
          {challenge.description}
        </Typography>

        <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>
          <Chip
            icon={<TrophyIcon sx={{ fontSize: 16 }} />}
            label={`${challenge.points} 积分`}
            color="primary"
            size="small"
          />
        </Box>

        {isParticipating && (
          <Box sx={{ mt: 2 }}>
            <Typography variant="body2" color="text.secondary" gutterBottom>
              完成进度
            </Typography>
            <LinearProgress 
              variant="determinate" 
              value={progress} 
              sx={{ 
                height: 6, 
                borderRadius: 3,
                bgcolor: theme => alpha(theme.palette.primary.main, 0.1),
              }} 
            />
            <Typography 
              variant="caption" 
              color="text.secondary" 
              sx={{ display: 'block', textAlign: 'right', mt: 0.5 }}
            >
              {progress}%
            </Typography>
          </Box>
        )}
      </CardContent>

      <CardActions sx={{ p: 2 }}>
        <Button
          fullWidth
          variant={isParticipating ? "outlined" : "contained"}
          onClick={() => isParticipating ? onView(challenge) : onParticipate(challenge)}
          disabled={loading}
          sx={{ 
            borderRadius: 20,
            position: 'relative'
          }}
        >
          {loading ? (
            <CircularProgress size={24} sx={{ position: 'absolute' }} />
          ) : (
            isParticipating ? "查看进度" : "立即参与"
          )}
        </Button>
      </CardActions>

      {error && (
        <Box sx={{ p: 2, pt: 0 }}>
          <Typography color="error" variant="caption">
            {error}
          </Typography>
        </Box>
      )}
    </Card>
  );
}

export default ChallengeCard; 